<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文本样式</title>
  <style>
    /*所有都设置为32px*/
    *{
      font-size: 32px;
    }
    /*设置字体为红色，文本高度50px,文本居中*/
    .c1{
      color: red;
      background:green;
      line-height: 50px;
      text-align: center;
    }
    /*设置字体为红色，文本高度50px,文本右对齐*/
    .c2{
      color: green;
      background: blue;
      line-height: 100px;
      text-align: right;
    }
    /*文本和图片的对其方式*/
    .top{
      vertical-align: top;
    }
    .middle{
      vertical-align: middle;
    }
    .bottom{
      vertical-align: bottom;
    }

    /*出现的位置用坐标%表示*/
    .c3{
      /*text-indent: 100px;*/
      text-indent: 20%;
    }
    /*上划线，下划线，删除线*/
    .c4{
      text-decoration: overline;
    }
    .c5{
      text-decoration: line-through;
    }
    .c6{
      text-decoration: underline;
    }
    /*全部变为小写*/
    .c7{
      text-transform: lowercase;
    }
/*全部变为大写*/
    .c8{
    text-transform: uppercase;
    }
    /*首单词变为大写，一般以空格区分单词*/
    .c9{
      text-transform: capitalize;
    }
    /*字符之间的间距*/
    .c10{
      letter-spacing: 10px;
    }
    /*单词之间的间距*/
    .c11{
      word-spacing: 20px;
    }
    /*white-space 控制元素内空白和换行的处理方式。
      nowrap 表示 "不换行"：文本会在同一行显示，直到遇到 <br> 标签才会换行，
      即使内容超出容器宽度也不会自动换行。
      */
    .c12{
      white-space: nowrap;
    }
  </style>
</head>
<body>
<div class="c1">这是c1</div>
<div class="c2">这是c2</div>
<p>这是一幅 <img class="top" src="../images/heihei.gif"> 图片</p>
<p>这是一幅 <img class="middle" src="../images/heihei.gif"> 图片</p>
<p>这是一幅 <img class="bottom" src="../images/heihei.gif"> 图片</p>
<div class="c3">这是c3</div>
<div class="c4">这是c4-上划线</div>
<div class="c5">这是c5-删除线</div>
<div class="c6">这是c6-下划线</div>
<div class="c7">Hello World i am Admin</div>
<div class="c8">Hello World i am Admin</div>
<div class="c9">Hello world iam Admin</div>
<div class="c10">这是一个div</div>
<div class="c11">这是 一个 div hello world</div>
<div class="c12">
  您在使用百度公司提供的各项服务之前，请您务必审慎阅读、充分理解本协议各条款内容，特别是以粗体标注的部分，包括但不限于免除或者限制责任的条款。如您不同意本服务协议及/或随时对其的修改，您可以主动停止使用百度公司提供的服务；您一旦使用百度公司提供的服务，即视为您已了解并完全同意本服务协议各项内容，包括百度公司对服务协议随时所做的任何修改，并成为我们的用户。
</div>
</body>
</html>